<template>
    <div>
        <div class="title mb-8">
            <div class="text-6">停车场管理</div>
        </div>
        <div class="query">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="名称">
                    <el-input
                        v-model="queryForm.name"
                        placeholder="请输入名称"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="search" @click="getData"
                        >查询</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div class="actions mb-4">
            <el-button
                icon="plus"
                type="warning"
                @click="addDialogVisible = true"
                >添加</el-button
            >
        </div>
        <div class="data mb-4">
            <el-table :data="tableData" class="w-full" bpayRecord>
                <el-table-column prop="id" label="id" />
                <el-table-column prop="name" label="名称" />
                <el-table-column label="固定车位">
                    <el-table-column prop="maxPrivateSC" label="最大" />
                    <el-table-column label="总数">
                        <template #default="scope">
                            {{
                                scope.row.emptyPrivateSC +
                                scope.row.notEmptyPrivateSC
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="emptyPrivateSC" label="空闲" />
                </el-table-column>
                <el-table-column label="公用车位">
                    <el-table-column prop="maxPublicSC" label="最大">
                    </el-table-column>
                    <el-table-column label="总数">
                        <template #default="scope">
                            {{
                                scope.row.emptyPublicSC +
                                scope.row.notEmptyPublicSC
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="emptyPublicSC" label="空闲" />
                </el-table-column>
                <el-table-column label="计费模式">
                    <el-table-column prop="priceMode" label="名称">
                        <template #default="scope">
                            {{
                                getPriceModeOptionById(scope.row.priceModeId)
                                    .name
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="费用（元/小时）">
                        <template #default="scope">
                            {{
                                getPriceModeOptionById(scope.row.priceModeId)
                                    .realPrice
                            }}
                        </template>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="操作" width="250">
                    <template #default="scope">
                        <el-space>
                            <el-button
                                type="primary"
                                icon="edit"
                                @click="handleEdit(scope.row)"
                                >编辑</el-button
                            >
                            <el-button
                                type="danger"
                                icon="delete"
                                @click="handleDelete(scope.row.id)"
                                >删除</el-button
                            >
                        </el-space>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="total"
                :page-size="10"
                @current-change="getData"
                v-model:current-page="queryForm.page"
            />
        </div>
        <div class="add-dialog">
            <el-dialog
                title="添加停车场"
                v-model="addDialogVisible"
                width="30%"
            >
                <el-form :model="addForm" label-position="top" ref="addFormRef">
                    <el-form-item label="名称" required prop="name">
                        <el-input
                            v-model="addForm.name"
                            placeholder="请输入名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        label="固定车位数量"
                        required
                        prop="maxPrivateSC"
                    >
                        <el-input
                            v-model="addForm.maxPrivateSC"
                            placeholder="请输入固定车位数量"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="公用车位数量" required prop="maxPublicSC">
                        <el-input
                            v-model="addForm.maxPublicSC"
                            placeholder="请输入公用车位数量"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="计费模式" required prop="priceModeId">
                        <el-select
                            v-model="addForm.priceModeId"
                            placeholder="请选择计费模式"
                        >
                            <el-option
                                v-for="item in priceModeOptions"
                                :key="item.id"
                                :label="`${item.name}: ${item.realPrice}元/小时`"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Check"
                            @click="addSubmit"
                            >提交</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div class="edit-dialog">
            <el-dialog
                title="修改停车场"
                v-model="editDialogVisible"
                width="30%"
            >
                <el-form
                    :model="editForm"
                    label-position="top"
                    ref="editFormRef"
                >
                    <el-form-item label="名称" required>
                        <el-input
                            v-model="editForm.name"
                            placeholder="请输入名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="计费模式" :required="true">
                        <el-select
                            v-model="editForm.priceModeId"
                            placeholder="请选择计费模式"
                        >
                            <el-option
                                v-for="item in priceModeOptions"
                                :key="item.id"
                                :label="`${item.name}: ${item.realPrice}元/小时`"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Check"
                            @click="editSubmit"
                            >提交</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
createParkApi,
deleteParkApi,
getParkPageApi,
updateParkApi,
} from '@/apis/park'
import { getPriceModeOptionListApi } from '@/apis/priceMode'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cloneDeep, keys, pick, pickBy } from 'lodash-es'
import { ref } from 'vue'

const queryForm = ref({
    name: '',
    page: 1,
})

// 添加表单
const addDialogVisible = ref(false)
const addFormRef = ref<any>(null)
// 添加表单数据
const defaultAddVal = {
    name: '停车场1',
    maxPrivateSC: 2,
    maxPublicSC: 8,
    priceModeId: undefined,
}
const addForm = ref(cloneDeep(defaultAddVal))
// 添加提交
const addSubmit = () => {
    addFormRef.value!.validate(async (valid) => {
        if (valid) {
            const res = await createParkApi(addForm.value)
            if (res) {
                addDialogVisible.value = false
                ElMessage.success('成功')
                addForm.value = cloneDeep(defaultAddVal)
                getData()
            }
        } else {
            return false
        }
    })
}

// 添加表单
const editDialogVisible = ref(false)
const editFormRef = ref<any>(null)
// 添加表单数据
const defaultEditVal = {
    id: 1,
    name: '停车场1',
    priceModeId: 0,
}
const editForm = ref(cloneDeep(defaultEditVal))
// 添加提交
const editSubmit = () => {
    editFormRef.value!.validate(async (valid) => {
        if (valid) {
            const picked = pick(editForm.value, keys(defaultEditVal))
            const id = picked.id
            delete picked.id
            const res = await updateParkApi(id, picked)
            if (res) {
                editDialogVisible.value = false
                ElMessage.success('成功')
                editForm.value = cloneDeep(defaultEditVal)
                getData()
            }
        } else {
            return false
        }
    })
}

// 点击编辑
const handleEdit = (row) => {
    editDialogVisible.value = true
    editForm.value = cloneDeep(row)
}

// 删除
const handleDelete = (id) => {
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            await deleteParkApi(id)
            ElMessage.success('删除成功!')
            getData()
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

// 表格数据
const tableData = ref<any>([])
const total = ref(0)

// 计费模式下拉选项
const priceModeOptions = ref<any>([])

// 获取表格数据
const getData = async () => {
    const queryData = cloneDeep(queryForm.value)
    const query = pickBy(queryData, (item) => item !== '' && item !== null)
    const res = (await getParkPageApi(query)) as any
    tableData.value = res.rows
    total.value = res.total
}

// 获取计费模式下拉选项
const getPriceModeOptions = async () => {
    const res = (await getPriceModeOptionListApi()) as any
    priceModeOptions.value = res
}

const getPriceModeOptionById = (id) => {
    if (priceModeOptions.value.length === 0) {
        return {}
    }
    return priceModeOptions.value.find((item) => item.id === id)
}

getData()
getPriceModeOptions()
</script>

<style scoped></style>
